Bases psychocognitives de la visualisation de données

Exercice 1

Open data

De nombreuses institutions publiques mettent à disposition leurs données. C'est un acte de transparence mais aussi une façon de permettre à tout un chacun de contribuer à la transition numérique via le développement de services basés sur des outils de visualisations et d'analyses spécialisés.

Consulter le site https://data.angers.fr/

Exporter pour chacune des types de variables (nominale, ordonnée et quantitative), une visualisation en accord avec la taxonomie de Mackinlay et une visualisation ne respectant pas cette taxonomie.

Rappel de définition

Attributs nominaux :

Valeurs parmi un ensemble (fini ou non) qui ont pour seule comparaison possible l’identité. Exemple : nom d’une personne (nombre infini de valeurs possibles), ou son sexe (H ou F).

Exemple:

Nom d’une personne (nombre infini de valeurs possibles), ou son sexe (H ou F).

Attributs ordonnés :

Pour deux valeurs on peut tester l’intensité mais aussi laquelle est la plus petite.

Exemple:

echelle de Likert « pas du tout d’accord », « pas d’accord », « indifférent », « d’accord », « tout à fait d’accord », taille des vêtements,..

Attributs quantitatifs : Définition:

Pour deux valeurs on peut tester l’identité, l’ordre et mesurer des différences.

Article de Mackinley

Attributs ordonnée

Pour cela nous allons utilisé une base de donnée sur la nomenclature des déchets

Mauvaise représentation

from IPython.display import IFrame
IFrame(src="https://data.angers.fr/explore/embed/dataset/nomenclature-des-dechets/analyze/?dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJzcGxpbmUiLCJmdW5jIjoiQ09VTlQiLCJzY2llbnRpZmljRGlzcGxheSI6dHJ1ZSwiY+29sb3IiOiIjRjBGMEYwIn1dLCJ4QXhpcyI6InR5cG9sb2dpZV9kZXNfZGVjaGV0cyIsIm1heHBvaW50cyI6NTAsInNvcnQiOiIiLCJjb25maWciOnsiZGF0YXNldCI6Im5vbWVuY2xhdHVyZS1kZXMtZGVjaGV0cyIsIm9wdGlvbnMiOnt9fSwic2VyaWVzQnJlYWtkb3duIjoiIiwic2VyaWVzQnJlYWtkb3duVGltZXNjYWxlIjoiIn1dLCJ0aW1lc2NhbGUiOiIiLCJkaXNwbGF5TGVnZW5kIjp0cnVlLCJhbGlnbk1vbnRoIjp0cnVlfQ%3D%3D&static=false&datasetcard=false", width="1000", height="500")

En effet, nous disposons bien de toutes les informations:

• identité de l'objet
• quantité de chaque objet

En revanche, le choix d'une ligne n'est pas judicieux

nous avons une impression de continuité là ou il n'y en a pas.

et celui de la couleur non plus.

On ne voit pas très bien les valeurs

Bonne représentation

IFrame(src="https://data.angers.fr/explore/embed/dataset/nomenclature-des-dechets/analyze/?dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJ0cmVlbWFwIiwiZnVuYyI6IkNPVU5UIiwic2NpZW50aWZpY0Rpc3BsYXkiOnRydWUsImNvbG9yIjoicmFuZ2UtQWNjZW50In1dLCJ4QXhpcyI6InR5cG9sb2dpZV9kZXNfZGVjaGV0cyIsIm1heHBvaW50cyI6MjAwLCJzb3J0Ijoic2VyaWUxLTEiLCJjb25maWciOnsiZGF0YXNldCI6Im5vbWVuY2xhdHVyZS1kZXMtZGVjaGV0cyIsIm9wdGlvbnMiOnt9fSwic2VyaWVzQnJlYWtkb3duIjoiIiwic2VyaWVzQnJlYWtkb3duVGltZXNjYWxlIjoiIn1dLCJ0aW1lc2NhbGUiOiIiLCJkaXNwbGF5TGVnZW5kIjp0cnVlLCJhbGlnbk1vbnRoIjp0cnVlfQ%3D%3D&static=false&datasetcard=false", width="1000", height="500")

Cela me semble être une bonne représentation, les blocs sont bien représentatifs de la quantité de chaque déchet.

Bloc volumineux implique beaucoup de déchets de ce type

La séparation est bien effectuée,

La couleur nous permet de directement identifier les différents blocs

Il y a un sens de lecture du déchet avec le plus haut compte vers le plus faible.

Du haut vers le bas et de la droite vers la gauche Qui plus est, ce sens de lecture nous est implicitement donné par la continuité.

Attributs nominaux

Pour cela nous allons utilisé une base de données sur un indice de qualité de l'air de la ville d'angers allant de: 1

air très bon

à 10:

air très mauvais

Sur la période du 1er Janvier 2020 au 31 décembre 2020.

Mauvaise représentation

IFrame(src="https://data.angers.fr/explore/embed/dataset/indice-de-qualite-de-lair-angers-loire-metropole/analyze/?q.timerange.date_ech=date_ech:%5B2020-01-01%20TO%202020-12-31%5D&dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJzcGlkZXJ3ZWIiLCJmdW5jIjoiQ09VTlQiLCJ5QXhpcyI6InZhbGV1ciIsInNjaWVudGlmaWNEaXNwbGF5Ijp0cnVlLCJjb2xvciI6IiNDMEM1Q0MiLCJwb3NpdGlvbiI6ImNlbnRlciJ9XSwieEF4aXMiOiJ2YWxldXIiLCJtYXhwb2ludHMiOm51bGwsInRpbWVzY2FsZSI6IiIsInNvcnQiOiJzZXJpZTEtMSIsImNvbmZpZyI6eyJkYXRhc2V0IjoiaW5kaWNlLWRlLXF1YWxpdGUtZGUtbGFpci1hbmdlcnMtbG9pcmUtbWV0cm9wb2xlIiwib3B0aW9ucyI6eyJxLnRpbWVyYW5nZS5kYXRlX2VjaCI6ImRhdGVfZWNoOlsyMDIwLTAxLTAxIFRPIDIwMjAtMTItMzFdIn19LCJzZXJpZXNCcmVha2Rvd24iOiIiLCJzZXJpZXNCcmVha2Rvd25UaW1lc2NhbGUiOiIifV0sImRpc3BsYXlMZWdlbmQiOnRydWUsImFsaWduTW9udGgiOnRydWUsInRpbWVzY2FsZSI6IiJ9&static=false&datasetcard=false", width="1000", height="500")

Nous disposons bien de toutes les informations comme vous pouvez le voir:

• Le nombre d'occurence de chaque qualité

En revanche, ceci est peu pertinent pour les raisons suivantes:

• On voit mal le tracé qui peut se confondre avec la grille
• Certaines valeurs d'indices de qualité apparaissent sans aucune occurence
• L'ordre est plutôt particulier et perturbant (3-4-5-2-6-7-8)

Bonne représentation

IFrame("https://data.angers.fr/explore/embed/dataset/indice-de-qualite-de-lair-angers-loire-metropole/analyze/?q.timerange.date_ech=date_ech:%5B2020-01-01%20TO%202020-12-31%5D&dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJjb2x1bW4iLCJmdW5jIjoiQ09VTlQiLCJ5QXhpcyI6InZhbGV1ciIsInNjaWVudGlmaWNEaXNwbGF5Ijp0cnVlLCJjb2xvciI6IiNCQTAxMjkiLCJwb3NpdGlvbiI6ImNlbnRlciJ9XSwieEF4aXMiOiJ2YWxldXIiLCJtYXhwb2ludHMiOm51bGwsInRpbWVzY2FsZSI6IiIsInNvcnQiOiIiLCJjb25maWciOnsiZGF0YXNldCI6ImluZGljZS1kZS1xdWFsaXRlLWRlLWxhaXItYW5nZXJzLWxvaXJlLW1ldHJvcG9sZSIsIm9wdGlvbnMiOnsicS50aW1lcmFuZ2UuZGF0ZV9lY2giOiJkYXRlX2VjaDpbMjAyMC0wMS0wMSBUTyAyMDIwLTEyLTMxXSJ9fSwic2VyaWVzQnJlYWtkb3duIjoiIiwic2VyaWVzQnJlYWtkb3duVGltZXNjYWxlIjoiIn1dLCJkaXNwbGF5TGVnZW5kIjp0cnVlLCJhbGlnbk1vbnRoIjp0cnVlLCJ0aW1lc2NhbGUiOiIifQ%3D%3D&static=false&datasetcard=false", width="1000", height="500")

Cette représentation en barre semble beaucoup plus pertinente:

• les différences sont bien plus marquées
• La couleur est bien visible
• On situe directement si l'air est plutôt bon ou mauvais

Attributs quantitatifs

POur cela nous allons utilisé une base de données sur les états civils à angers De début 2003 à début 2020 et nous intéresser au nombre de naissance.

Mauvaise représentation

IFrame(src="https://data.angers.fr/explore/embed/dataset/stat_etat_civil_angers/analyze/?q.timerange.annee=annee:%5B2003-01-01%20TO%202020-01-01%5D&dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJwaWUiLCJmdW5jIjoiU1VNIiwieUF4aXMiOiJuYWlzc2FuY2VzX3RvdGFsIiwic2NpZW50aWZpY0Rpc3BsYXkiOnRydWUsImNvbG9yIjoicmFuZ2UtQWNjZW50IiwicG9zaXRpb24iOiJjZW50ZXIifV0sInhBeGlzIjoiYW5uZWUiLCJtYXhwb2ludHMiOjIwMCwidGltZXNjYWxlIjoieWVhciIsInNvcnQiOiJzZXJpZTEtMSIsImNvbmZpZyI6eyJkYXRhc2V0Ijoic3RhdF9ldGF0X2NpdmlsX2FuZ2VycyIsIm9wdGlvbnMiOnsicS50aW1lcmFuZ2UuYW5uZWUiOiJhbm5lZTpbMjAwMy0wMS0wMSBUTyAyMDIwLTAxLTAxXSJ9fSwic2VyaWVzQnJlYWtkb3duIjoiIiwic2VyaWVzQnJlYWtkb3duVGltZXNjYWxlIjoiIn1dLCJkaXNwbGF5TGVnZW5kIjp0cnVlLCJhbGlnbk1vbnRoIjp0cnVlLCJ0aW1lc2NhbGUiOiIifQ%3D%3D&static=false&datasetcard=false", width="1000", height="500")

Ce diagramme en camembert représente bien les bonnes informations. Cependant, il n'est pas du tout optimisé. En effet:

• Le camembert représente mal la notion d'évolution
• L'ordre est mauvais
• À priori, la proportion de chaque année semble être la même.

Bonne représentation

IFrame(src="https://data.angers.fr/explore/embed/dataset/stat_etat_civil_angers/analyze/?q.timerange.annee=annee:%5B2003-01-01%20TO%202020-01-01%5D&dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJsaW5lIiwiZnVuYyI6IlNVTSIsInlBeGlzIjoibmFpc3NhbmNlc190b3RhbCIsInNjaWVudGlmaWNEaXNwbGF5Ijp0cnVlLCJjb2xvciI6IiM2NmMyYTUiLCJwb3NpdGlvbiI6ImNlbnRlciJ9XSwieEF4aXMiOiJhbm5lZSIsIm1heHBvaW50cyI6MjAwLCJ0aW1lc2NhbGUiOiJ5ZWFyIiwic29ydCI6IiIsImNvbmZpZyI6eyJkYXRhc2V0Ijoic3RhdF9ldGF0X2NpdmlsX2FuZ2VycyIsIm9wdGlvbnMiOnsicS50aW1lcmFuZ2UuYW5uZWUiOiJhbm5lZTpbMjAwMy0wMS0wMSBUTyAyMDIwLTAxLTAxXSJ9fSwic2VyaWVzQnJlYWtkb3duIjoiIiwic2VyaWVzQnJlYWtkb3duVGltZXNjYWxlIjoiIn1dLCJkaXNwbGF5TGVnZW5kIjp0cnVlLCJhbGlnbk1vbnRoIjp0cnVlLCJ0aW1lc2NhbGUiOiIifQ%3D%3D&static=false&datasetcard=false", width="1000", height="500")

Cette représentation semble bien meilleure, en effet:

• On voit une évolution dans le temps directement
• Il n'y a pas d'information parasite Un problème est que l'échelle accentue l'écart. Cependant, si le but est de montrer une décroissance, cette représentation est tout à fait adaptée !

Exercice 2

L'énoncé est le suivant:

Reproduire par vous même les graphes que vous aurez exportés dans l'exercice 1.

N'appréciant pas particulièrement la syntaxe de R, je vais tenter de reproduire tout cela sur python3.

Attributs nominaux

Mauvaise représentation

#Dans un premier temps, nous allons importer les modules qui
#vont nous servir pour faire les différentes représentation
import pandas as pd
import plotly as plt
import requests
from io import StringIO
pd.options.plotting.backend = "plotly"
# Ensuite chargeons le tableau de données dans pandas en tant que data frame
URL="https://data.angers.fr/explore/dataset/nomenclature-des-dechets/download/?format=csv&timezone=Europe/Berlin&lang=fr&use_labels_for_header=true&csv_separator=%3B"
r = requests.get(URL)
StringData = StringIO(r.text)
df = pd.read_csv(StringData, sep =";")
# verifions que nous avons bien les bonnes données
df

	Typologie des déchets	Produits	Qu'est-ce que j'en fais ?	Que va-t-il devenir ?	Comment éviter de le produire ?
0	Bois	Morceaux de bois non traité	bois de chauffage - déchèterie	Le bois brut peut encore vous faire passer de ...	Privilégier le réemploi et le don
1	Bois	Boîte de camembert en bois	ordures ménagères	Votre déchet ne peut pas être recyclé, ni réem...	NaN
2	Bois	Souche d'arbre	déchèterie	Votre déchet est volumineux, peut contenir des...	NaN
3	Bois	Contreplaqué, aggloméré	déchèterie	Votre déchet est volumineux, peut contenir des...	Privilégier le réemploi et le don
4	Bois	Morceaux de bois traité (parquet, terrasse, pi...	déchèterie	Votre déchet est volumineux, peut contenir des...	Privilégier le réemploi et le don
...	...	...	...	...	...
196	Verre	Flacon de Parfum	tri (conteneur verre)	Bonne nouvelle, le verre est recyclable à 100%...	Dans la mesure du possible, préférez les produ...
197	Verre	Verre de table cassé	ordures ménagères - déchèterie	Votre déchet ne peut pas être recyclé, ni réem...	NaN
198	Verre	Bouteille huile en verre	tri (conteneur verre)	Bonne nouvelle, le verre est recyclable à 100%...	Privilégier les contenants réutilisables (les ...
199	Verre	Bocal, pot en verre (confiture, Miel…)	tri (conteneur verre)	Bonne nouvelle, le verre est recyclable à 100%...	Penser à les réutiliser. Dans le cas contraire...
200	Verre	Flacon de médicament (sirop, huiles essentiell...	tri (conteneur verre)	Bonne nouvelle, le verre est recyclable à 100%...	NaN

201 rows × 5 columns

df=df[df.columns[0]].tolist()  #Nous récupérons uniquement les infos qui nous intéressent sous forme de liste

#Désormais on recréer le bon dataframe
clean_df=pd.DataFrame([(i,df.count(i)) for i in set(df)])
clean_df

	0	1
0	Déchets de jardin	5
1	Déchets Dangereux	20
2	Divers	41
3	Métaux	14
4	Mobilier	5
5	Textiles et cuir	4
6	Verre	8
7	Plastiques	33
8	Déchets Electriques et électroniques	15
9	Papiers-Cartons	26
10	Déchets de cuisine	11
11	Déchets de travaux	11
12	Bois	8

clean_df.plot(x=0,y=1,line_shape='spline')

fig = plt.express.treemap(clean_df,path=[0],values=1)
fig.show()

Les représentations affichées ne sont certes pas identiques, mais je considère qu'elles sont aussi bonnes (ou mauvaises, selon le point de vue)

#Pour le deuxieme, nous allons faire une version abrègé du code
URL="https://data.angers.fr/explore/dataset/indice-de-qualite-de-lair-angers-loire-metropole/download/?format=csv&timezone=Europe/Paris&lang=fr&use_labels_for_header=true&csv_separator=%3B"
df2 = pd.read_csv(StringIO(requests.get(URL).text), sep =";")
df2

	id	valeur	qualif	type	couleur	date_ech	code_zone	lib_zone	source	Geo Shape	geo_point_2d
0	107	2	très bon	constat	#19FF19	2020-12-08	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
1	128	3	bon	constat	#19FF19	2020-12-05	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
2	352	3	bon	constat	#19FF19	2020-11-03	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
3	471	4	bon	constat	#19FF19	2020-10-17	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
4	534	3	bon	constat	#19FF19	2020-10-08	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
...	...	...	...	...	...	...	...	...	...	...	...
718	3579	3	bon	constat	#19FF19	2019-07-31	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
719	3922	4	bon	constat	#19FF19	2019-06-12	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
720	4440	5	moyen	constat	#FFC800	2019-03-30	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
721	4972	3	bon	constat	#19FF19	2019-01-13	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
722	4993	4	bon	constat	#19FF19	2019-01-10	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728

723 rows × 11 columns

df2=df2.loc[df2['date_ech']>='2020'].loc[df2['date_ech']<='2021']
df2

	id	valeur	qualif	type	couleur	date_ech	code_zone	lib_zone	source	Geo Shape	geo_point_2d
0	107	2	très bon	constat	#19FF19	2020-12-08	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
1	128	3	bon	constat	#19FF19	2020-12-05	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
2	352	3	bon	constat	#19FF19	2020-11-03	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
3	471	4	bon	constat	#19FF19	2020-10-17	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
4	534	3	bon	constat	#19FF19	2020-10-08	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
...	...	...	...	...	...	...	...	...	...	...	...
707	1339	3	bon	constat	#19FF19	2020-06-15	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
708	1507	4	bon	constat	#19FF19	2020-05-22	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
709	1584	4	bon	constat	#19FF19	2020-05-11	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
710	1605	4	bon	constat	#19FF19	2020-05-08	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728
711	2494	3	bon	constat	#19FF19	2020-01-02	244900015	Angers Loire Métropole	Air Pays de la Loire	{"type": "Point", "coordinates": [-1.363100957...	-5.98356101862,-1.36310095728

358 rows × 11 columns

temp=df2[df2.columns[1]].tolist()
clean_df2=pd.DataFrame([(str(i),temp.count(i)) for i in set({1,2,3,4,5,6,7,8,9,10})])
clean_df2

	0	1
0	1	0
1	2	10
2	3	174
3	4	105
4	5	56
5	6	10
6	7	2
7	8	1
8	9	0
9	10	0

#Mauvaise représentation
fig2 = plt.express.line_polar(clean_df2, r=1, theta=clean_df2[0].tolist())
fig2.show()

#Bonne représentation
fig = plt.express.bar(clean_df2, x=0, y=1)
fig.show()

#Pour le troisième
URL="https://data.angers.fr/explore/dataset/stat_etat_civil_angers/download/?format=csv&timezone=Europe/Paris&lang=fr&use_labels_for_header=true&csv_separator=%3B"
df3= pd.read_csv(StringIO(requests.get(URL).text), sep =";")
df3

	ANNEE	NAISSANCES_TOTAL	NAISSANCES_PARENTS_MARIES	NAISSANCES_PARENTS_NON_MARIES	MARIAGES	DECES_DOMICILE_INTRA_MUROS	DECES_DOMICILE_EXTRA_MUROS	DECES_TOTAL	TRANSCRIPTIONS	PACS_ENREGISTREMENT	CHANGEMENT_PRENOM
0	2020	5576	1768	3808	309	1124	1575	2699	148	451.0	26.0
1	2019	5606	1874	3732	363	1069	1444	2513	167	310.0	31.0
2	2018	5703	2008	3695	391	1052	1448	2500	159	90.0	37.0
3	2017	5843	2072	3771	431	995	1425	2420	220	0.0	46.0
4	2016	5903	2133	3770	470	1102	1292	2394	192	NaN	NaN
5	2015	5993	2210	3783	433	1047	1383	2430	200	NaN	NaN
6	2014	6192	2369	3719	453	909	1315	2224	182	NaN	NaN
7	2013	6219	2339	3831	458	980	1284	2264	213	NaN	NaN
8	2012	6339	2506	3833	402	964	1355	2319	178	NaN	NaN
9	2011	6385	2676	3709	460	885	1303	2188	206	NaN	NaN
10	2010	6361	2817	3544	431	962	1261	2253	214	NaN	NaN
11	2009	6223	2764	3459	437	961	1279	2240	183	NaN	NaN
12	2008	6354	3015	3339	462	920	1273	2193	205	NaN	NaN
13	2007	6246	3063	3183	463	978	1240	2218	178	NaN	NaN
14	2006	6440	3341	3099	510	885	1188	2073	165	NaN	NaN
15	2005	6343	3381	2962	544	1041	1347	2388	127	NaN	NaN
16	2004	6243	3385	2858	579	992	1255	2247	130	NaN	NaN
17	2003	6311	3546	2765	562	1155	1270	2425	141	NaN	NaN

fig = plt.express.pie(df3, values='ANNEE', names='NAISSANCES_TOTAL')
fig.show()

df3.plot(x='ANNEE',y='NAISSANCES_TOTAL')